<template>
	<div class="big-fa">
		<div class="big-one">
			<div class="left">
				<div class="lone">
					<img class="tu" src="../../../../public/img/t-行业专区图标.png" alt="111">
					<!-- 某某专区 -->
					<span class="ltext">行业专区</span>
					<div class="ltext-one">各行素材精选，让您的营销事半功倍</div>
				</div>
			</div>
			<div class="right">
				<div class="rtext">餐饮行业</div>
				<div class="rtext">汽车服务</div>
				<div class="rtext">户外旅行</div>
				<div class="rtext">美妆护肤</div>
				<div class="rtext">IT互联网</div>
				<div class="rtext">教育培训</div>
				<div class="rtext">地产行业</div>

			</div>

		</div>
		<!-- 插槽 works-->
		<div class="cacao">
			<slot name="work"></slot>
		</div>
	</div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.big-fa {
		width: 1296px;
		height: 400px;


		.big-one {
			width: 1296px;
			height: 56px;
			display: flex;
			justify-content: space-between;

			.left {
				width: 225px;
				height: 56px;

				.tu {
					width: 24px;
					height: 24px;
				}

				.ltext {
					width: 96px;
					height: 29px;
					font-size: 24px;
					font-weight: 700;
					margin-left: 5px;
				}

				.ltext-one {
					width: 224px;
					height: 21px;
					font-size: 14px;
					color: rgb(154, 154, 156);
					margin-top: -4px;
				}
			}

			/* // 右边那部分 */
			.right {
				width: 1127px;
				height: 32px;
				display: flex;
				justify-content: space-around;

				.rtext {
					width: 84px;
					height: 32px;
					background-color: rgb(247, 249, 250);
					border-radius: 10px;
					text-align: center;
					line-height: 32px;
					font-weight: 600;

					&:hover {
						background-color: black;
						color: white;
					}
				}
			}

		}


	}

	.cacao {
		display: flex;
		justify-content: space-between;
	}
</style>